<template>
  <div>

    <el-row :gutter="15">
      <el-col :span="4">
        <el-input v-model="input" size="small" placeholder="请输入查询的内容"></el-input>
      </el-col>
      <el-col :span="4" style="width: 80px">
        <el-button size="mini" style="font-size: 14px" type="warning" @click="doseach()"><i
          class="iconfont icon-search"></i>查询
        </el-button>
      </el-col>
      <el-col :span="4" style="width: 80px">
        <el-button size="mini" style="font-size: 14px" type="success" @click="doadd()"><i class="iconfont icon-add"></i>添加
        </el-button>
      </el-col>
      <el-col :span="4" style="width: 80px">
        <el-button size="mini" style="font-size: 14px" type="danger"><i class="iconfont el-icon-delete"></i>批量删除
        </el-button>
      </el-col>
      <el-col :span="4" :offset="10" style="width: 80px;">
      </el-col>
    </el-row>


    <el-table :data="users" size="mini" ref="multipleTable" stripe style="width: 100%"
              @row-click="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="id"
        label="ID"
        width="80">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="100">
      </el-table-column>
      <el-table-column
        prop="remark"
        label="职位"
        width="180">
      </el-table-column>
      <el-table-column
        prop="createBy"
        label="创建人"
        width="150">
      </el-table-column>
      <el-table-column label="操作" width="200" style="text-align: center">
        <el-row :guttor="12" slot-scope="scope">
          <el-col :span="10">
            <el-button type="primary" @click="openDialog(scope.row)" size="mini"><i class="iconfont el-icon-edit"></i>修改
            </el-button>
          </el-col>
          <el-col :span="10">
            <el-button type="danger" size="mini"><i class="iconfont el-icon-delete"></i>删除</el-button>
          </el-col>
        </el-row>
      </el-table-column>
    </el-table>
    <!--分页条-->
    <div class="block">
      <el-pagination
        @size-change="pageSizeChange"
        @current-change="pageChange"
        :current-page="currentPage"
        :page-sizes="[2,10, 20, 30, 40,100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totals">
      </el-pagination>
    </div>
    <h2>权限管理</h2>
    <el-tree
      :data="treedate"
      show-checkbox
      node-key="id"
      :props="defaultProps"
      ref="tree"
      default-expand-all
      :expand-on-click-node="false">
      <div slot-scope="{ node, data }">
        <div style="width: 500px;">
          <el-row>
            <el-col :span="6">
              {{data.name}}
            </el-col>
            <el-col :span="4">
              <template v-if="data.type == 0">
                <el-tag type="success" size="mini">目录</el-tag>
              </template>
              <template v-else-if="data.type == 1">
                <el-tag type="warning" size="mini">菜单</el-tag>
              </template>
              <template v-else>
                <el-tag type="danger" size="mini">按钮</el-tag>
              </template>
            </el-col>
            <el-col :span="6">
              <template v-if="data.type == 0">
                <span>顶级菜单</span>
              </template>
              <template v-else-if="data.type == 1">
                <span>系统管理</span>
              </template>
              <template v-else>
                <span>用户管理</span>
              </template>
            </el-col>
            <el-col :span="4">
              {{data.perms}}
            </el-col>
          </el-row>
        </div>
      </div>
    </el-tree>

    <!-- dialog -->

    <el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="500px">
      <el-form :model="form" size="small">
        <el-form-item label="用户名称" label-width="80px">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="80px">
          <el-input v-model="form.remark" type="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="80px">
          <el-input v-model="form.createBy" autocomplete="off"></el-input>
        </el-form-item>
        <!--<el-form-item label="角色" label-width="80px">
          <el-select v-model="form.selectValue" multiple placeholder="请选择" style="width: 100%">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.remark"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>-->
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dosave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'

  export default {
    name: "UserManager",
    data() {
      return {
        input: '',
        users: [],
        form: {selectValue: []},
        currentPage: 1,
        pageSize: 10,
        totals: 100,
        title: '',
        dialogFormVisible: false,
        options: [],
        multipleSelection: '',
        treedate: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      }
    }, methods: {
      getTreeData() {
        var that = this
        axios.get("/sys/role/treeData", {
          params: {
            pid: '0'
          }
        }).then(function (response) {
          that.treedate = response.data
        })
      },
      dosave() {
        var that = this
        this.dialogFormVisible = false
        var ids = '';
        for (var i in this.form.selectValue) {
          ids = ids + "," + this.form.selectValue[i]
        }
        if (ids) {
          ids = ids.substring(1)
          this.form.ids = ids;
        } else {
          this.form.ids = [];
        }
        axios.post("/sys/role/edit",
          qs.stringify(this.form)
        ).then(function (response) {
          var mes = response.data.message;
          if (response.data.code == '200') {
            that.$notify({
              title: '成功',
              message: mes,
              type: 'success'
            });
            that.page();
          } else {
            that.$notify.error({
              title: '错误',
              message: mes
            });
          }
        })
      },
      doadd() {
        this.title = '新增窗口'
        this.dialogFormVisible = true
        this.form = {
          selectValue: []
        }
      },
      openDialog(row) {
        this.title = '编辑窗口'
        this.dialogFormVisible = true
        this.form = row
      },
      doseach() {
        this.currentPage = 1;
        this.page();
      },
      pageSizeChange(val) {
        this.pageSize = val;
        this.page();
      },
      pageChange(val) {
        this.currentPage = val;
        this.page();
      },
      page() {
        var that = this;
        axios.get('/sys/role/list', {
          params: {
            input: that.input,
            currentPage: that.currentPage,
            pageSize: that.pageSize
          }
        }).then(function (response) {
          that.users = response.data.list
          that.totals = response.data.total
        })
      },
      handleSelectionChange(row) {
        var that = this
        this.multipleSelection  = row.id
        axios.get("/sys/role/menuids/"+row.id).then(res=>{
          that.$refs.tree.setCheckedKeys(res.data);
        })
      }
    }, mounted() {
      this.page();
      this.getTreeData()
    }
  }
</script>

<style scoped>

</style>
